<?php
use yii\helpers\Url;

$web = Url::to("@web");
//$img = Url::to("@web/img/special/dragon-ball");
$img = "http://dorabox-10018656.file.myqcloud.com/wxmall/longzhu";
$link = Url::home(true) . '/';
//$link = "";
//if (YII_ENV == 'dev') {
//    $link = "http://wxdev.duolahe.com/biz_weixin/web/index.php/";
//} else {
//    $link = "http://wx.duolahe.com/biz_weixin/web/index.php/";
//}

?>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>龙珠专区</title>
    <link type="text/css" href="<?= $web ?>/css/special/dragon-ball.css" rel="stylesheet"/>
    <script type="text/javascript" src="<?= $web ?>/js/jquery.js"></script>
    <script type="text/javascript" src="<?= $web ?>/js/jquery.lazyload.min.js"></script>
    <script type="application/javascript">
        $(document).ready(function () {
            var w = $(document).width();
            if (w > 640) {
                w = 640;
            }
            $("body").css("font-size", w * 20 / 320);

            var h = $(window).height();

            $("#bg_frame").height(h);

            h -= $(".dialog-frame-top").height();
            h -= $(".dialog-frame-bottom").height();
            $(".dialog-frame-center").height(h);

//            $("img").each(function () {
//                var src = $(this).attr("data-original");
//                $(this).attr("src", src);
//            });
            $("img").lazyload({});

            $(".menu-close").click(function () {
                $(".dialog-frame").hide();
            });

            $(".menu-01").click(function () {
                $(".menu-01").animate({left: '0'});
                $(".menu-02").delay(100).animate({left: '0'});
                $(".menu-03").delay(200).animate({left: '0'});

                setTimeout(hideMenu, 3000);
            });

            $(".menu-02").click(function () {
                $(".dialog-frame").show();
                $(".dialog-content img").each(function () {
                    var src = $(this).attr("data-original");
                    $(this).attr("src", src);
                });
            });

            $("#btn_dialog").click(function () {
                $(".dialog-frame").show();
                $(".dialog-content img").each(function () {
                    var src = $(this).attr("data-original");
                    $(this).attr("src", src);
                });
            });

            $(".btn-top").click(function () {
                $('body').animate({scrollTop: 0}, 500);
                return false;
            });

            $(window).scroll(function () {
                if ($(this).scrollTop() > 100) {
                    if (isTop == true) {
                        isTop = false;
                        $(".btn-top").animate({right: '0'});
                    }
                } else {
                    if (isTop == false) {
                        isTop = true;
                        $(".btn-top").animate({right: '-1.5em'});
                    }
                }
            });
        });

        var isTop = true;

        function hideMenu() {
            $(".menu-01").delay(200).animate({left: '1.5em'});
            $(".menu-02").delay(100).animate({left: '4em'});
            $(".menu-03").animate({left: '4em'});
        }

        function link(href) {
            window.location.href = "<?= $link ?>" + href;
        }
    </script>
</head>
<body style="font-size: 20px;">
<div style="width: 16em;">
    <img src="" data-original="<?= $img ?>/home-01.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-02.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-03.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-04.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-05.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-06.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-07.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-08.png" class="img-160">
    <img src="" data-original="<?= $img ?>/home-09.png" class="img-120" onclick="link('wx-bag/goods-custom-list?bag_id=1001G210000000000U48')">
    <img src="" data-original="<?= $img ?>/home-10.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-11.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-12.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-13.png" class="img-120" onclick="link('wx-bag/goods-custom-list?bag_id=1001G210000000000U4C')">
    <img src="" data-original="<?= $img ?>/home-14.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-15.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-16.png" class="img-160">
    <img src="" data-original="<?= $img ?>/home-17.png" class="img-120" onclick="link('wx-bag/goods-custom-list?bag_id=1001G210000000000UWV')">
    <img src="" data-original="<?= $img ?>/home-18.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-19.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-20.png" class="img-160">
    <img src="" data-original="<?= $img ?>/home-21.png" class="img-120" onclick="link('wx-bag/goods-custom-list?bag_id=1001G210000000000UX1')">
    <img src="" data-original="<?= $img ?>/home-22.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-23.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-24.png" class="img-140">
    <img src="" data-original="<?= $img ?>/home-25.png" class="img-120" onclick="link('wx-bag/goods-custom-list?bag_id=1001G210000000000UX6')">
    <img src="" data-original="<?= $img ?>/home-26.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-27.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-28.png" class="img-160">
    <img src="" data-original="<?= $img ?>/home-29.png" class="img-120" onclick="link('wx-bag/goods-custom-list?bag_id=1001G210000000000UXC')">
    <img src="" data-original="<?= $img ?>/home-30.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-31.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-32.png" class="img-140">
    <img src="" data-original="<?= $img ?>/home-33.png" class="img-120" onclick="link('wx-bag/goods-custom-list?bag_id=1001G210000000000UXP')">
    <img src="" data-original="<?= $img ?>/home-34.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-35.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-36.png" class="img-200">
    <img src="" data-original="<?= $img ?>/home-37.png" class="img-120" id="btn_dialog">
    <img src="" data-original="<?= $img ?>/home-38.png" class="img-136" onclick="link('wx-home/home')">

    <div class="dialog-frame" style="display: none;">
        <div class="mask"></div>
        <div class="dialog-content-frame">
            <img src="<?= $img ?>/dialog-frame-01.png" class="dialog-frame-top">
            <div class="dialog-frame-center" style="background-image: url('<?= $img ?>/dialog-frame-02.png');">
                <div class="dialog-content">
                    <img src="" data-original="<?= $img ?>/content-01.png" class="img-content">
                    <img src="" data-original="<?= $img ?>/content-02.png" class="img-content">
                    <img src="" data-original="<?= $img ?>/content-03.png" class="img-content">
                    <img src="" data-original="<?= $img ?>/content-04.png" class="img-content">
                    <img src="" data-original="<?= $img ?>/content-05.png" class="img-content">
                    <img src="" data-original="<?= $img ?>/content-06.png" class="img-content">
                    <img src="" data-original="<?= $img ?>/content-07.png" class="img-content">
                    <img src="" data-original="<?= $img ?>/content-08.png" class="img-content">
                    <img src="" data-original="<?= $img ?>/content-09.png" class="img-content">
                    <img src="" data-original="<?= $img ?>/content-10.png" class="img-content">
                    <img src="" data-original="<?= $img ?>/content-11.png" class="img-content">
                    <img src="" data-original="<?= $img ?>/content-12.png" class="img-content">
                </div>
            </div>
            <img src="<?= $img ?>/dialog-frame-03.png" class="dialog-frame-bottom">
            <img src="<?= $img ?>/menu-close.png" class="menu-close">
        </div>
    </div>

    <div class="menu-frame">
        <img src="<?= $img ?>/menu-01.png" class="menu-01" style="height: 1.5em; width:4em; left:1.5em;">
        <img src="<?= $img ?>/menu-02.png" class="menu-02" style="height: 1.5em; width:4em; left:4em;">
        <img src="<?= $img ?>/menu-03.png" class="menu-03" style="height: 1.5em; width:4em; left:4em;" onclick="link('wx-home/home')">
    </div>

    <img src="<?= $img ?>/btn-top.png" class="btn-top" style="right: -1.5em; bottom: 1em; width: 1.5em; height: 4em;">
</div>
</body>
</html>
